import React,{Component} from 'react';
import { NavBar,Card, WingBlank, WhiteSpace, Tabs,Button} from 'antd-mobile';
import { Carousel} from 'antd-mobile';
import { connect } from 'react-redux';
import { fetchCarsouelList } from '../actions';
import { StickyContainer, Sticky } from 'react-sticky';
import axios from 'axios';
const mapStateToProps = state=>{
  return {
    carousel: state.carousel
  }
}
function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
const tabs = [
  { title: 'News List' },
  { title: 'Product  List' },
  { title: 'Third List' },
];

 class Tabs1 extends Component{
  constructor(props){
    super(props);
    this.state={
      list:[],
      page:1,
      listnews:[],

    }
  }
  getData = ()=>{
    axios({
      url   : `http://localhost:3000/product?_page=1&_limit=3&_sort=id&_order=desc`,
      method: 'get'
    }).then(res=>{
      this.setState({
          list:[...this.state.list,...res.data]
      })

    }
    )
  }
  getData1 = ()=>{
    axios({
      url   : `http://localhost:3000/news?_page=1&_limit=3&_sort=id&_order=desc`,
      method: 'get'
    }).then(res=>{
      this.setState({
          listnews:[...this.state.listnews,...res.data]
      })

    }
    )
  }



  componentDidMount(){
    this.getData();
    this.getData1();

    this.props.fetchCarsouelList();
  }
  render(){
    const { Meta } = Card;
    const {carousel} = this.props;
    let jsx=[];
    for(var i=0;i<this.state.list.length;i++){
      jsx.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.list[i].text}
        thumb={this.state.list[i].img}
        extra={<span>{this.state.list[
          i].id}</span>}
          thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}
      />
      <Card.Body >
        <div style={{
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        'overflow': 'hidden',
        'display':'block','width':'100%'
}}>{this.state.list[i].content}</div>
      </Card.Body>

    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      )
    }


    let  jsxnews=[];
    for(var i=0;i<this.state.listnews.length;i++){
      jsxnews.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.listnews[i].text}
        thumb={this.state.listnews[i].img}
        extra={<span>{this.state.listnews[
          i].id}</span>}
          thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}

      />
      <Card.Body>
        <div style={{
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        'overflow': 'hidden',
        'display':'block','width':'100%'
}}>{this.state.listnews[i].content}</div>
      </Card.Body>

    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      )
    }
    return (
      <div>
        <NavBar mode= "dark">首页</NavBar>

        <WingBlank>
        <Carousel
        autoplay = {false}
        infinite
        beforeChange = {(from, to) => console.log(`slide from ${from} to ${to}`)}
        afterChange  = {index => console.log('slide to', index)}
      >
        {carousel.map(val => (
          <a
            key   = {val.id}
            href  = {val.url}
            style = {{ display: 'inline-block', width: '100%', height: 200 }}
          >
            <img
              src   = {val.img}
              alt   = {val.title}
              style = {{ width: '100%', verticalAlign: 'top' }}

            />
          </a>
        ))}
      </Carousel>
        </WingBlank>


  <div>
    <br/>
  <Button type="primary">产品模块</Button><WhiteSpace />
    {jsx}
    <Button type="primary">新闻模块</Button><WhiteSpace />
   {jsxnews}


</div>





      </div>
    )
  }
}

export default connect(mapStateToProps,{fetchCarsouelList})(Tabs1);